<template>
    <div class="login-container">
        <el-form ref="form" :model="form" label-width="80px" class="login-form" :rules="rules">
            <h2 class="login-title">视途北斗视频运营平台</h2>
            <el-form-item label="账号" prop="username">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">登陆</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {login, getUserInfo} from '@/api/login'

export default {
    data() {
      return {
        form: {
          username: '',
          password: '',
        },
        // 校验规则 -> 失去焦点时触发
        rules: {
            username: [
                {required: true, message: '账号不能为空', trigger: 'blur'}
            ],
            password: [
                {required: true, message: '密码不能为空', trigger: 'blur'}
            ]
        }
      }
    },
    methods: {
      submitForm(formName) {
        //   判断输入账号密码是否为空
        this.$refs[formName].validate(valid => {
            if(valid){
                // 调用login接口
                login(this.form.username, this.form.password).then(response => {
                    const resp = response.data
                    console.log(resp, resp.flag)
                    // 判断输入账号密码是否正确
                    if(resp.flag){
                        // 调用getUserInfo接口
                        getUserInfo(resp.data.token).then(response => {
                            const respUser = response.data
                            // 判断是否成功获取到用户消息
                            if(respUser.flag){
                                console.log('userInfo', respUser.data)
                                // 将用户名保存到本地
                                localStorage.setItem('seeto-user', JSON.stringify(respUser.data))
                                // 将用户信息保存到本地
                                localStorage.setItem('seeto-token', resp.data.token)
                                // 跳转到首页
                                this.$router.push('/')
                            }else{
                                this.$message({
                                message: respUser.message,
                                type: 'warning'
                        })
                            }
                        })
                    }else{
                        // alert(resp.message)
                        this.$message({
                            message: resp.message,
                            type: 'warning'
                        })
                    }
                })
            }else{
                console.log('验证失败')
                return false
            }
        })
      }
    }
  
}
</script>

<style scoped>
.login-form{
    width: 350px;
    /* 上下间距160 左右自动居中  */
    margin: 160px auto;
    background-color: rgb(255, 255, 255, 0.8);
    padding: 28px;
    border-radius: 20px;
}
.login-container{
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../../assets/login.jpg');
    background-repeat:no-repeat ;
    background-size:100% 100%;
    background-attachment: fixed;

}
.login-title{
    color: #303133;
    text-align: center;
}
</style>